From 23e2f6c06cdf71eadf62d12da0e8e4ee142ed4b5 Mon Sep 17 00:00:00 2001
From: "Karl O. Pinc" <kop@karlpinc.com>
Date: Sun, 29 Sep 2024 19:16:33 -0500
Subject: [PATCH] Attach events to HTML elements with javascript

---
 src/pgwui_sql/static/pgwui_sql.js    |  8 ++++++++
 src/pgwui_sql/static/sql_edit.js     | 27 ++++++++++++++++++++++++++-
 src/pgwui_sql/templates/sql.mak      |  2 +-
 src/pgwui_sql/templates/sql_edit.mak | 12 ++++--------
 4 files changed, 39 insertions(+), 10 deletions(-)

diff --git a/src/pgwui_sql/static/pgwui_sql.js b/src/pgwui_sql/static/pgwui_sql.js
index 89e04b5..d87adff 100644
--- a/src/pgwui_sql/static/pgwui_sql.js
+++ b/src/pgwui_sql/static/pgwui_sql.js
@@ -61,6 +61,13 @@ function getSheet(url) {
             return sheet;
         }}}
 
+function attachEvents() {
+    const new_entry_button = document.getElementById('new_entry_window_id');
+    if (new_entry_button !== null) {
+        new_entry_button.addEventListener("click", openSqlEdit);
+    }
+}
+
 function initializeStyling() {
     // Apply a checkbox when it exists
     function applyCheckbox(id, initFunc) {
@@ -76,4 +83,5 @@ function initializeStyling() {
 /* Initialization */
 globalThis.tdSqltextSheet = getSheet(pgwuiSqlShowWhitespaceURL());
 globalThis.horizontalRuleSheet = getSheet(pgwuiSqlBackgroundRulesURL());
+attachEvents();
 initializeStyling();
diff --git a/src/pgwui_sql/static/sql_edit.js b/src/pgwui_sql/static/sql_edit.js
index 0f2a353..9ecac76 100644
--- a/src/pgwui_sql/static/sql_edit.js
+++ b/src/pgwui_sql/static/sql_edit.js
@@ -21,7 +21,7 @@
   Karl O. Pinc <kop@karlpinc.com>
 */
 
-function show_search_path() {
+function showSearchPath() {
   fetch('${request.route_path("pgwui_sql_db_search_path")|n}')
     .then((response) => {
           if (!response.ok) {
@@ -58,3 +58,28 @@ function toggleEOLInfoRow() {
         expanded.setAttribute('hidden', 'hidden');
     }
 }
+
+
+/* Initialization */
+
+function attachEvents() {
+    document.getElementById('show_search_path_btn_id')
+        .addEventListener("click", showSearchPath);
+
+    const expand_eol_info = document.getElementById('expand_eol_info_id');
+    const collapse_eol_info = document.getElementById('collapse_eol_info_id');
+    expand_eol_info.addEventListener("click", toggleEOLInfoRow);
+    collapse_eol_info.addEventListener("click", toggleEOLInfoRow);
+    expand_eol_info.addEventListener("keydown", toggleEOLInfoRow);
+    collapse_eol_info.addEventListener("keydown", toggleEOLInfoRow);
+
+    document.getElementById('tab_delimited_help_id')
+        .addEventListener("click", () =>
+            window.alert(
+              'Caution: Tabs are not removed from SQL results.'
+              + '  Data containing tab characters will introduce'
+              + ' spurious/extra columns.'
+            ));
+}
+
+attachEvents();
diff --git a/src/pgwui_sql/templates/sql.mak b/src/pgwui_sql/templates/sql.mak
index 69157b5..f6d8ba6 100644
--- a/src/pgwui_sql/templates/sql.mak
+++ b/src/pgwui_sql/templates/sql.mak
@@ -202,7 +202,7 @@
      <input value="Login" tabindex="${tab_index.val}" type="submit" />
    % else:
      <button type="button" tabindex="${tab_index.val}"
-             onclick="openSqlEdit();"
+             id="new_entry_window_id"
      >New SQL Entry Window</button>
    % endif
    <% tab_index.inc() %>
diff --git a/src/pgwui_sql/templates/sql_edit.mak b/src/pgwui_sql/templates/sql_edit.mak
index efc8a97..7ce75d8 100644
--- a/src/pgwui_sql/templates/sql_edit.mak
+++ b/src/pgwui_sql/templates/sql_edit.mak
@@ -81,7 +81,7 @@
         </%self.lib:td_input>
         <td>
           <button type="button" tabindex="${tab_index.val}"
-                  onclick="show_search_path();"
+                  id="show_search_path_btn_id"
           >Reset</button>
           <% tab_index.inc() %>
         </td>
@@ -144,12 +144,12 @@
 <%def name="eol_info_row(tab_index)">
       <tr class="eol_info">
         <td colspan="4"><span id="collapsed_eol_info_id"
-          ><p onclick="toggleEOLInfoRow()" onkeydown="toggleEOLInfoRow()"
+          ><p id="expand_eol_info_id"
               tabindex="${tab_index.val}"
           >▲ Important information about the end-of-line marker characters
             within text</p></span><span
             id="expanded_eol_info_id" hidden><p
-            onclick="toggleEOLInfoRow()" onkeydown="toggleEOLInfoRow()"
+            id="collapse_eol_info_id"
             tabindex="${tab_index.val}"
           >▼ Important information about the end-of-line marker characters
             within text</p>
@@ -222,11 +222,7 @@
                  ${tab_checked | n}
                  />
           <label class="label" for="download_fmt_tab_id">Tab delimited</label><span
-            onclick="window.alert(
-              'Caution: Tabs are not removed from SQL results.'
-              + '  Data containing tab characters will introduce'
-              + ' spurious/extra columns.'
-              )"
+            id="tab_delimited_help_id"
             class="help">⁈</span>
         </%self.lib:td_input>
       </tr>
-- 
2.34.1